<template>
	<view>
		<view class="tab-title">
			<u-tabs :list="list" :is-scroll="false" bar-height="4" active-color="#00BBAA " inactive-color="#555" :current="current" @change="change"></u-tabs>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in lists[current]" :key="index" @click="jump('/pages/college/active-detail?id='+item.activityId)">
				<image :src="item.cover"></image>
				<view class="more u-flex" v-if="current === 0 || current === 1">
					<view class="num1" @click.stop="doSign(item.activityId)" v-if="current === 0">签到</view>
					<view class="num2" @click.stop="doUot(item.activityId)" v-if="current === 1">离场</view>
				</view>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '待参加'
				}, {
					name: '活动中'
				},{
					name: '已结束'
				}],
				current: 0,
				lists:{'0':[],'1':[],'2':[]},
				page:{'0':1,'1':1,'2':1},
				status:{'0':'loading','1':'loading','2':'loading'},
			}
		},
		methods: {
			change(index) {
				this.current = index
				
				this.page[index] = 1
				this.getList(index)
			},
			getList(indexs){
				const index = indexs === undefined ? this.current : indexs
				this.status[index] = 'loading'
				this.$u.api.myActivity({
					state:index + 1,
					page:this.page[index],
					limit:10
				}).then(res=>{
					this.lists[index] = this.page[index] == 1 ? res : this.lists[index].concat(res)
					this.status[index] = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
			doSign(id){
				this.$u.api.activitySign({activity_id:id}).then(res=>{
					this.$u.toast('签到成功')
					const index = this.current
					this.page[index] = 1
					this.getList(index)
				})
			},
			doUot(id){
				this.$u.api.activityUot({activity_id:id}).then(res=>{
					this.$u.toast('离场成功')
					const index = this.current
					this.page[index] = 1
					this.getList(index)
				})
			}
		},
		onLoad() {
			this.getList(0)
		},
		onReachBottom() {
			const index = this.current
			if(this.status[index] == 'loadmore'){
				this.page[index] ++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	page{background-color: #F2F2F2;}
	.tab-title{
		position: sticky;top: 0;z-index: 9;border-top: 1rpx solid #ddd;background-color: #fff;
	}
	.list{
		padding: 20rpx 50rpx;
		.item{
			background-color: #fff;border-radius: 20rpx;margin-top: 30rpx;overflow: hidden;
			&:first-child{margin-top: 0;}
			image{display: block;width: 100%;height: 250rpx;}
		}
		.more{
			justify-content: flex-end;height: 100rpx;
			view{color: #fff;border-radius: 100rpx;padding: 6rpx 35rpx;font-size: 28rpx;margin-right: 20rpx;}
			.num1{background-color: $tc;}
			.num2{background-color: #F55332;}
		}
	}
</style>
